<template>
  <div class="cloudIndex">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack"></Header>
    <div class="cloud" style="margin-top: 0.8rem;">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../../static/images/cloudBanner.jpg" alt="">
          </div>
        </div>

      </div>
      <div class="cloudList">
        <div class="cloudTitle">
          <p ><span>VR展厅案例</span></p>
        </div>
        <div class="cloudItem" v-for="(item,index) in cloudItem">

          <div class="Clist">
            <div class="list1"> </div>
            <div class="list2">
              <a :href=item.path target="_blank">
                <div class="listInner">
                  <div class="detail-images">
                    <div class="detail-images-revise">
                      <div class="images-left span7">
                        <img :src=item.thumb style="border: 0;width: 100%;height: 100%" />
                      </div>
                      <div class="title-right span5">
                        <h1>{{item.title}}</h1>
                        <p>{{item.content}}</p>
                        <p class="heat">
                          <span>{{item.visit}}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <div class="list3"></div>
          </div>
          <div class="blank">

          </div>
        </div>

        <!--<div class="cloudItem">-->

          <!--<div class="Clist">-->
            <!--<div class="list1"> </div>-->
            <!--<div class="list2">-->
              <!--<a href="http://qf-cloud.ttfj.com/" target="_blank">-->
                <!--<div class="listInner">-->
                  <!--<div class="detail-images">-->
                    <!--<div class="detail-images-revise">-->
                      <!--<div class="images-left span7">-->
                        <!--<img src="../../../static/images/cloudList1.jpg" style="border: 0;width: 100%;height: 100%" />-->
                      <!--</div>-->
                      <!--<div class="title-right span5">-->
                        <!--<h1>中国恒天集团"清风恒天"云展馆</h1>-->
                        <!--<p>“清风恒天”云展馆720度全景展现中国恒天集团党风廉政建设工作，通过网上展馆进一步学习贯彻习近平新时代中国特色社会主义思想，落实全面从严治党，营造员工清正廉洁、企业风清气正的良好氛围。</p>-->
                        <!--<p class="heat">-->
                          <!--<span>1342</span>-->
                        <!--</p>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</a>-->
            <!--</div>-->
            <!--<div class="list3"></div>-->
          <!--</div>-->
          <!--<div class="blank">-->

          <!--</div>-->
        <!--</div>-->
        <!--<div class="cloudItem">-->

          <!--<div class="Clist">-->
            <!--<div class="list1"> </div>-->
            <!--<div class="list2">-->
              <!--<a href="https://720yun.com/t/6l73ll5o2dfnm4dlhj" target="_blank">-->
                <!--<div class="listInner">-->
                  <!--<div class="detail-images">-->
                    <!--<div class="detail-images-revise">-->
                      <!--<div class="images-left span7">-->
                        <!--<img src="../../../static/images/cloudList2.jpg" style="border: 0;width: 100%;height: 100%" />-->
                      <!--</div>-->
                      <!--<div class="title-right span5">-->
                        <!--<h1>中国恒天集团"恒天党建"云展馆</h1>-->
                        <!--<p>"恒天党建"云展馆720度全景展现中国恒天集团党建工作，通过网上展馆进一步学习贯彻习近平新时代中国特色社会主义思想，落实全面从严治党。</p>-->
                        <!--<p class="heat">-->
                          <!--<span>3142</span>-->
                        <!--</p>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</a>-->
            <!--</div>-->
            <!--<div class="list3"></div>-->
          <!--</div>-->
          <!--<div class="blank">-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="cloudItem">-->

          <!--<div class="Clist">-->
            <!--<div class="list1"> </div>-->
            <!--<div class="list2">-->
              <!--<a href="https://720yun.com/t/85442e8qenidgq5914" target="_blank">-->
                <!--<div class="listInner">-->
                  <!--<div class="detail-images">-->
                    <!--<div class="detail-images-revise">-->
                      <!--<div class="images-left span7">-->
                        <!--<img src="../../../static/images/cloudList3.jpg" style="border: 0;width: 100%;height: 100%" />-->
                      <!--</div>-->
                      <!--<div class="title-right span5">-->
                        <!--<h1>党史馆</h1>-->
                        <!--<p>党史馆通过图文、视频、语音等多种形式，更好地教育引导党员领导干部学习党史知识，增强思想自觉、政治自觉和行动自觉，学思践悟，学做结合。</p>-->
                        <!--<p class="heat">-->
                          <!--<span>1342</span>-->
                        <!--</p>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</a>-->
            <!--</div>-->
            <!--<div class="list3"></div>-->
          <!--</div>-->
          <!--<div class="blank">-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>
<script>
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  export default({
    data (){
      return{
        title:'云展馆',
        cloudItem:[]
      }
    },
    components:{
      Aside:aside,
      Header:header
    },
    methods:{
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      choiseffclTab (index){
        this.defaultIndex =index
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
      },
      choiseHead(index){
        this.defaultIndex =index
      },
      init(){
          this.axios.get('/home/cloud/getCloud?'+`${this.baseUrl}`)
            .then((res)=>{
              console.log(res.data)
              this.cloudItem =res.data.data
              console.log(this.cloudItem)
            })
      }
    },
    mounted (){
      $('body').removeClass('active')
      var clientWidth =document.documentElement.clientWidth
      if(clientWidth>=750){
        clientWidth =$('body').width()
      }
      this.init()
    }
  })
</script>
<style scoped>
  .swiper-container{
    width: 100%;
    height: 3.79rem;
    background: #f9f5f5;
  }
  .swiper-container .swiper-slide img{
    width: 100%;
    height: 3.59rem;
  }
  .cloudTitle{
    height: 0.72rem;
    line-height: 0.72rem;
    background: linear-gradient(to bottom,white,#fef5f4);

  }
  .cloudTitle span{
    padding-left: 1rem;
    height: 100%;
    position: relative;
    font-size: 0.3rem;
    color: #333333;
    font-weight: bold;
  }
  .cloudTitle span:before{
    position: absolute;
    content: "";
    left: 0.32rem;
    top:0;
    width: 0.45rem;
    height: 100%;
    background-image: url("../../../static/images/star.png");
    background-size: 0.45rem 0.45rem;
    background-position: center;

  }
  .cloudItem .Clist{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 5.5rem;

  }
  .cloudItem .Clist .list1{
    width: 0.32rem;
    height: 100%;
    background: linear-gradient(to right ,#fff ,#fdf1f1);
    overflow: hidden;
  }
  .cloudItem .Clist .list2{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;

    background: white;
  }
  .cloudItem .Clist .list3{
    width: 0.32rem;
    height: 100%;
    background: linear-gradient(to right ,#fdf1f1 ,#fff);

  }
  .blank{
    height: 0.3rem;
    width: 100%;
    background: linear-gradient(#fdefee 0%  ,#fffafa 50%  ,#fef5f4 100% );
  }
  .listInner{
    padding: 0.2rem 0.2rem 0 0.2rem;
    background: white;
    border-radius: 0.08rem;
    -webkit-border-radius: 0.08rem;
    background: white;
  }
  .images-left{
    height: 2.43rem;
    position: relative;
  }
  .images-left a{
    position: absolute;
    left: 0.1rem;
    bottom: 0.2rem;
    color: #000;
    font-size: 0.26rem;
  }
  .title-right h1{
    font-size: 0.32rem;
    font-weight: bold;
    padding: 0.1rem 0;
    color: #333;
  }
  .title-right p{
    font-size: 0.26rem;
    color: #333;
    text-align: justify;
    line-height: 0.34rem;
    text-indent: 2em;
  }
  .title-right p.heat{
    text-align: right;
    font-size: 0.24rem;
    color: #333333;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
  }
  .heat span{
    padding-left: 0.35rem;
    position: relative;

  }
  .heat span:after{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    margin-top: -0.1rem;
    width: 0.34rem;
    height: 100%;
    background-image: url("../../../static/images/heat.png");
    background-size:0.22rem 0.23rem ;
    background-repeat: no-repeat;

  }
</style>
